<template>
	<view class="woprogress">
		<view class="ag-topbg"></view>
		<view class="woprogress-card">
			<view class="woprogress-card__head">
				<view class="ag-womarker">{{firstChar(orderDetailData.WoType)}}</view>
				<view class="woprogress-card__col">
					<view class="woprogress-card__col-row">
						<text class="woprogress-card__name">{{orderDetailData.WoType}}</text>
						<view class="ag-status-tag ag-status-tag--error">
							<text>{{orderDetailData.OrderStatusName}}</text>
						</view>
						<!-- <view class="woprogress-card__desc">已接单</view> -->
						<view class="woprogress-card__desc">{{orderDetailData.OrderStatusName}}</view>
					</view>
					<view class="woprogress-card__col-time">
						<view class="woprogress-card__no">{{orderDetailData.WoNum}}</view>
						<text>接单时间：{{orderDetailData.ServiceSiteAcceptDate}}</text>
					</view>
				</view>
			</view>
			<view class="woprogress-card__body">
				<view class="ag-cellgroup">
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-user.png" />
						</view>
						<view class="ag-cell__value">
							<text>{{orderDetailData.ContactName}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-phone.png" />
						</view>
						<view class="ag-cell__value">
							<text class="ag-color-primary">{{orderDetailData.ContactMobile}}</text>
						</view>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label">
						<image mode="widthFix" src="../../static/img/icon-location.png" />
					</view>
					<view class="ag-cell__value">
						<!-- <text>{{address}}</text> -->
						<text>{{orderDetailData.DisplayAdress}}</text>
					</view>
				</view>
				<!-- <view class="ag-cell">
					<view class="ag-cell__label">
						<text>机型：</text>
					</view>
					<view class="ag-cell__value">
						<text>A4</text>
					</view>
				</view> -->
				<view class="ag-cell">
					<view class="ag-cell__label">
						<text>备注：</text>
					</view>
					<view class="ag-cell__value">
						<text>{{orderDetailData.WORemark}}</text>
					</view>
				</view>

				<view class="ag-divider"></view>

				<view class="timeline">
					<view v-for="(item,index) in serviceHistoryData" :key="index" :class="['timeline-item', item.active ? 'active':'']">
						<view class="timeline-item__time">
							<text>{{woTransDateFomart(item.WoTransDate)[0]}}</text>
							<text>{{woTransDateFomart(item.WoTransDate)[1]}}</text>
							<!-- <text>2018-3-8</text> -->
							<!-- <text>14:52</text> -->
						</view>
						<view class="timeline-item__dot"></view>
						<view class="timeline-item__card">
							<text class="timeline-item__title">{{item.WoTransTypeName}}</text>
							<text class="timeline-item__desc">操作人：{{item.RelatedUserName}}</text>
							<text v-if="item.WoTransType==5" class="timeline-item__desc">预约时间：{{item.ScheduledTime}}</text>
							<text v-if="item.WoTransType==6" class="timeline-item__desc">上门时间：{{item.ArrivedTime}}</text>
							<text v-if="item.WoTransType==6" class="timeline-item__desc">上门里程：{{item.HomeMileage}}</text>
							<text v-if="item.WoTransType==6" class="timeline-item__desc">定位成功：{{item.IsLocationSuccess?'是':'否'}}</text>
							<text v-if="item.WoTransType==6" class="timeline-item__desc">更正地址：{{item.RevisedAddress}}</text>
							<text v-if="item.WoTransType==1" class="timeline-item__desc">服务网点：{{item.ServiceSiteName}}</text>
							<text class="timeline-item__desc">原因代码：{{item.ReasonCodeName ? item.ReasonCodeName : ''}}</text>
							<text class="timeline-item__desc">描述：{{item.Description ? item.Description : '..'}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>


	</view>
</template>
<script>
	import woprogressbehavior from './woprogressbehavior';
	import Utils from '../../common/utils';
	export default {
		mixins: [woprogressbehavior],
		components: {},
		data() {
			return {
				orderDetailId: '',
				orderDetailData: {},
				serviceHistoryData: {},
				// address: '',
			}
		},
		onLoad: function(option) {

			this.orderDetailId = option.orderDetailId;
			console.log(this.orderDetailId);
			this.onLoadData();
			// this.woTransDateFomart(new Date());
		},
		onShow(e) {
			let pages = getCurrentPages();
			let prevPageData = pages[pages.length - 2].data;
			if (prevPageData.hasOwnProperty("orderDetailData")) {
				this.orderDetailData = prevPageData.orderDetailData;
				console.log(this.orderDetailData);
			}
		},
		methods: {
			//加载数据
			onLoadData() {
				uni.showLoading({
					mask: true,
					title: "加载中..",
				})
				//工单的服务历程-全部
				this.GetOrderServiceHistory(this.orderDetailId);
				// this.GetCurrentAddress();
			},
			firstChar: function(str) {
				if (str)
					return str.charAt(0);
				else
					return "";
			},
			woTransDateFomart(woTransDate) {
				if (woTransDate) {
					let date = Utils.formatDate(new Date(woTransDate), "yyyy-MM-dd hh:mm:ss");
					return date.split(' ')
				} else {
					return "";
				}
			},
		},
	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
